<template>
<view>
  <!-- 导航栏 -->
  <navigation @topHeight="topHeightFn" @binnavigateBack="binnavigateBacks" :showIcon="true" title="客户详情"></navigation>
  <view class="main_box">
    <view class="list_mian">
      <!-- 一般用法 -->
      <uni-card :title="'客户名称: '+detilData.realname" :is-full="true">
        <view class="top_text">
          <view class="text_left">
            <text>预算：</text>
            <text class="">{{detilData.budget}}-{{detilData.budget_end}}</text>
          </view>
          <view class="text_right">
            <text>桌数：</text>
            <text class="">{{detilData.banquet_size}}-{{detilData.banquet_size_end}}</text>
          </view>
        </view>
        <view class="top_text">
          <view class="text_left">
            <text>咨询区域：</text>
            <text class="">{{detilData.zone}}</text>
          </view>

        </view>
        <view class="top_text">
          <view class="text_left">
            <text>联系方式：</text>
            <text class="">{{detilData.mobile}}</text>
          </view>
          <view class="text_right">
            <!-- <text>显示</text> -->
            <!-- <text class="">20-30</text>		  -->
          </view>
        </view>
        <view class="top_text">
          <view class="text_left">
            <text>客资来源：</text>
            <text class="">{{detilData.source_text}}</text>
          </view>

        </view>
        <view class="top_text">
          <view class="text_left">
            <text>婚期时间：</text>
            <text class="">{{detilData.wedding_date}}</text>
          </view>

        </view>
        <view class="top_text">
          <view class="text_left">
            <text>所需酒店：</text>
            <text class="">{{detilData.hotel_text}}</text>
          </view>
        </view>
        <view class="top_text">
          <view class="text_left">
            <text>客户备注：</text>
            <text class="">{{detilData.remark}}</text>
          </view>
        </view>
      </uni-card>
    </view>
  </view>
  <view class="control">
    <uni-segmented-control :current="current" content="space-evenly" :values="items" @clickItem="onClickItem" style-type="text" active-color="#406CEB"></uni-segmented-control>
  </view>
  <view class="content">
    <view v-show="current === 0">
      <view class="main_box">
        <view class="list_mian" v-for="(item,index) in recordData" :key="index">
          <!-- 一般用法 -->
          <uni-card title="" :is-full="true" extra="">
            <view class="top_text">
              <view class="text_left">
                <text>跟进状态：</text>
                <text class="">{{item.status}}</text>
              </view>
            </view>
            <view class="top_text">
              <view class="text_left">
                <text>回访时间：</text>
                <text class="">{{item.create_time}}</text>
              </view>
            </view>
            <view class="top_text">
              <view class="text_left">
                <text>跟进人员：</text>
                <text class="">{{item.realname}}</text>
              </view>
            </view>
            <view class="top_text">
              <view class="text_left">
                <text>回访内容：</text>
                <text class="">{{item.content}}</text>
              </view>
            </view>
          </uni-card>
        </view>
        <view class="tip" style="font-size: 26upx;text-align: center;padding: 20upx 0;" v-if="recordData.length==0">
          暂无回访记录~
        </view>
      </view>
    </view>
    <view v-show="current === 1">
      <view class="main_box">
        <view class="list_mian" v-for="(item,index) in shopData" :key="index" @click="gotoShop(item.id)">
          <!-- 一般用法 -->
          <uni-card title="" :is-full="true" extra="">
            <view class="top_text">
              <view class="text_left" style="display:flex">
                <text>进店状态：</text>
                <view class="" style="display:flex;justify-content: space-between; font-size: 28upx;position: relative;">
                  <view class="uni-input"> {{item.status}} </view>
                  <view class="" style="position: absolute;right: -400upx;">
                    >
                  </view>
                </view>
              </view>
            </view>
            <view class="top_text">
              <view class="text_left">
                <text>预约进店时间：</text>
                <text class="">{{item.subscribe_time}}</text>
              </view>
            </view>
            <view class="top_text">
              <view class="text_left">
                <text>实际进店时间：</text>
                <text class="">{{item.real_time}}</text>
              </view>
            </view>
            <view class="top_text">
              <view class="text_left">
                <text>下次进店时间：</text>
                <text class="">{{item.next_time}}</text>
              </view>
            </view>
            <view class="top_text">
              <view class="text_left">
                <text>备注：</text>
                <text class="">{{item.remark}}</text>
              </view>
            </view>

          </uni-card>
        </view>
      </view>
      <view class="tip" style="font-size: 26upx;text-align: center;padding: 20upx 0;" v-if="shopData.length==0">
        暂无进店记录~
      </view>
    </view>
  </view>
  <view class="menu">
    <view class="viewList" @click="apply()">
      <image class="viewList_image" src="@/static/images/customer_icon/follw.png"></image>
      <text class="viewList_text">申请客资</text>
    </view>
  </view>
</view>
</template>

<script>
import navigation from '@/component/navigation.vue'
import sun from '@/utils/sun.js'
export default {
  components: {
    navigation,
  },
  data() {
    return {
      detilData: {}, //客户详情
      current: 0,
      recordData: [], //回访记录
      options: "",
      shopData: [], //进店记录
      items: ['回访记录', '进店记录'],
      shopPage: 0,
      recordPage: 0,
    }
  },
  onLoad(options) {
    this.options = options
  },
  onShow() {
    this.getData({
      id: this.options.id
    })
    this.getRecord({
      id: this.options.id
    })
    this.shopRecord({
      id: this.options.id
    })
  },
  methods: {
    topHeightFn(e) {
      this.topHeight = e
    },
    ///只为不让上一页刷新
    binnavigateBacks(e) {
      let pages = getCurrentPages(); //获取所有页面栈实例列表
      let nowPage = pages[pages.length - 1]; //当前页页面实例
      let prevPage = pages[pages.length - 2]; //上一页页面实例
      pages[0].$vm.is_show = false;

    },
    getData(e) {
      let that = this
      sun.request({
        url: "/h5/customer.customer/member",
        showLoading: true,
        token: true,
        data: {
          member_id: e.id
        },
        success(res) {
          if (res.code == 200) {
            that.detilData = res.data.customer
          }
        },
        fail(e) {
          uni.showToast({
            icon: "none",
            title: "服务器开小差去啦~",
          })
        }
      })
    },
    onClickItem(e) {
      this.current = e.currentIndex
    },
    //回访记录
    getRecord(e) {
      let that = this
      sun.request({
        url: "/h5/customer.visit/detailList",
        showLoading: true,
        token: true,
        data: {
          member_id: e.id,
        },
        success(res) {
          if (res.code == 200) {
            that.recordData = res.data
          }
        },
        fail(e) {
          uni.showToast({
            icon: "none",
            title: "服务器开小差去啦~",
          })
        }
      })
    },
    //进店记录
    shopRecord(e) {
      let that = this
      sun.request({
        url: "/h5/customer.enter/index",
        showLoading: true,
        token: true,
        data: {
          member_id: e.id,
          page: that.shopPage ? that.shopPage : 0
        },
        success(res) {
          if (res.code == 200) {
            that.shopData = res.data.list
          }
        },
        fail(e) {
          uni.showToast({
            icon: "none",
            title: "服务器开小差去啦~",
          })
        }
      })
    },
    apply() {
      let that = this;
      let id = that.options.id;
      let index = that.options.index;
      uni.showModal({
        title: '提示',
        content: '是否申请该条客资?',
        success: function (res) {
          if (res.confirm) {
            that.applyPhone({
              id: id,
              index: index
            })
          } else if (res.cancel) {}
        }
      });
    },
    //申请客资
    applyPhone(e) {
      let that = this
      sun.request({
        url: "/h5/customer.customer/doApply",
        showLoading: true,
        token: true,
        data: {
          ids: e.id,
        },
        success(res) {
          if (res.code == 200) {
            uni.showToast({
              icon: "none",
              title: res.msg
            })
          } else {
            uni.showToast({
              icon: "none",
              title: res.msg
            })
          }
        }
      })
    },
    gotoShop(id) {
      uni.navigateTo({
        url: "../../customerDetail/editorShop/editorShop?id=" + id
      })
    },
  }
}
</script>

<style lang="less">
page {
  padding-bottom: 180upx;
}

///当下得样式
.main_box {
  width: 100%;
  // background: #FFFFFF;		}

  .list_mian:first-child {
    margin-top: 0upx;
  }

  .list_mian {
    width: 100%;
    margin-top: 16upx;

    .top_text {
      width: 100%;
      display: flex;
      justify-content: left;

      .text_left {
        text:first-child {
          font-size: 26upx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(25, 25, 25, 1);
        }

        text:last-child {
          font-size: 26upx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(25, 25, 25, 1);
        }
      }

      .text_right {
        padding-left: 150upx;

        text:first-child {
          font-size: 26upx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(25, 25, 25, 1);
        }

        text:last-child {
          font-size: 26upx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(25, 25, 25, 1);
        }
      }
    }

  }
  }

  .control {
    margin-top: 10upx;
    padding-top: 10upx;
    width: 100%;
    height: 80upx;
    background: rgba(255, 255, 255, 1);
  }

  .menu {
    width: 100%;
    height: 149upx;
    padding: 29upx 0upx;
    box-sizing: border-box;
    background: #FFFFFF;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    border-top: 1upx solid #E5E5E5;

    .viewList {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      .viewList_text {
        font-size: 22upx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(25, 25, 25, 1);
      }

      .viewList_image {
        width: 48upx;
        height: 48upx;
      }
    }
  }

</style>